<template>
  <div class="data_box">
    <!-- <dv-full-screen-container class="full_box"> -->
    <dv-border-box1 ref="borderRef">

      <!-- 头部 -->
      <header>
        <span class="title"> 智慧停车场</span>
        <div small-bg class="title_line">
          <dv-decoration5 :dur="2" style="width:300px;height:40px;" />
        </div>
      </header>
      <!-- 主体 -->
      <main>
        <!-- 左边 -->
        <div class="left">
          <!-- 头部 -->
          <div class="left_top">
            <div small-bg>
              <div w50rem h18rem p3 lex="~ " justify-center items-center bg-dark>
                <dv-border-box6>
                  <div dv-bg>
                    <span class="small_title">地区排名表</span>

                    <div w50rem h24rem p3 flex="~ col" justify-center items-center bg-dark>
                      <div class="ranking">

                        <dv-scroll-ranking-board :config="config" style="width:80%;height:420px" />
                      </div>
                      <div pt5>
                      </div>
                    </div>

                  </div>
                </dv-border-box6>
              </div>

            </div>
          </div>
          <!-- 底部 -->
          <div class="left_bottom">
            <dv-border-box6>
              <span class="small_title">车流量显示</span>
              <dv-active-ring-chart :config="conf" style="width:300px;height:300px" />
            </dv-border-box6>
          </div>
        </div>
        <!-- 中间 -->
        <div class="middle">
          <div>
            <div ref="roadRef" style="width: 100%;height: 500px;"></div>
            <div ref="chartRef" class="tu1" style="width: 100%; height: 300px;"></div>

          </div>
        </div>
        <!-- 右边 -->
        <div class="right">
          <!-- 头部 -->
          <div class="right_top">
            <div small-bg>
              <dv-border-box6 style="padding: 10px;">
                <span class="small_title">车流量显示</span>
                <dv-conical-column-chart :config="config" style="width:90%;height:300px;margin-bottom: 10px;" />
              </dv-border-box6>
            </div>
          </div>
          <!-- 底部 -->
          <div class="right_bottom">
            <dv-border-box6>
              <span class="small_title">车流量显示</span>
              <dv-capsule-chart :config="config" style="width:100%;height:22rem" />
            </dv-border-box6>
          </div>
        </div>
      </main>

    </dv-border-box1>

    <!-- </dv-full-screen-container> -->
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import * as echarts from 'echarts';
import { onMounted } from 'vue';
type EChartsOption = echarts.EChartsOption;
const chartRef = ref(null);
const roadRef = ref(null);
// 地区排名表
const config = reactive({
  data: [
    {
      name: '周口',
      value: 55,
    },
    {
      name: '南阳',
      value: 120,
    },
    {
      name: '西峡',
      value: 78,
    },
    {
      name: '驻马店',
      value: 66,
    },
    {
      name: '新乡',
      value: 80,
    },
    {
      name: '信阳',
      value: 45,
    },
    {
      name: '漯河',
      value: 29,
    },
  ],
  unit: '万元',
})

// 动态环图
const conf = reactive({
  lineWidth: 24,
  digitalFlopStyle: {
    fill: 'pink',
  },
  data: [
    {
      name: '杭州',
      value: 98,
    },
    {
      name: '金华',
      value: 150,
    },
    {
      name: '宁波',
      value: 62,
    },
    {
      name: '太原',
      value: 54,
    },
  ],
})

onMounted(() => {
  // 折线图
  var myChart = echarts.init(chartRef.value);
  var option: EChartsOption;
  option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
    },
    toolbox: {
      feature: {
        // saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Line 1',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [140, 232, 101, 264, 90, 340, 250]
      },
      {
        name: 'Line 2',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)'
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 282, 111, 234, 220, 340, 310]
      },
      {
        name: 'Line 3',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)'
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 132, 201, 334, 190, 130, 220]
      },
      {
        name: 'Line 4',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 0, 135)'
            },
            {
              offset: 1,
              color: 'rgb(135, 0, 157)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 402, 231, 134, 190, 230, 120]
      },
      {
        name: 'Line 5',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 191, 0)'
            },
            {
              offset: 1,
              color: 'rgb(224, 62, 76)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 302, 181, 234, 210, 290, 150]
      }
    ]
  };

  option && myChart.setOption(option);


  var roadChart = echarts.init(roadRef.value);
  var option1: EChartsOption;

  // prettier-ignore
  const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];

  const dateList = data.map(function (item) {
    return item[0];
  });
  const valueList = data.map(function (item) {
    return item[1];
  });

  option1 = {
    // Make gradient line here
    visualMap: [
      {
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 400
      },
      {
        show: false,
        type: 'continuous',
        seriesIndex: 1,
        dimension: 0,
        min: 0,
        max: dateList.length - 1
      }
    ],

    title: [
      {
        left: 'center',
        text: 'Gradient along the y axis'
      },
      {
        top: '55%',
        left: 'center',
        text: 'Gradient along the x axis'
      }
    ],
    tooltip: {
      trigger: 'axis'
    },
    xAxis: [
      {
        data: dateList
      },
      {
        data: dateList,
        gridIndex: 1
      }
    ],
    yAxis: [
      {},
      {
        gridIndex: 1
      }
    ],
    grid: [
      {
        bottom: '60%'
      },
      {
        top: '60%'
      }
    ],
    series: [
      {
        type: 'line',
        showSymbol: false,
        data: valueList
      },
      {
        type: 'line',
        showSymbol: false,
        data: valueList,
        xAxisIndex: 1,
        yAxisIndex: 1
      }
    ]
  };

  option1 && roadChart.setOption(option1);


})

</script>

<style lang="less" scoped>
.data_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #08041b;
  box-sizing: border-box;

  header {
    width: 100%;
    height: 80px;
    padding-top: 10px;
    // background-color: paleturquoise;
    text-align: center;
    position: relative;

    .title {
      font-size: 30px;
      font-weight: bold;
      color: #ffffff;

    }

    .title_line {
      position: absolute;
      left: 50%;
      top: 70%;
      transform: translate(-50%, -50%);
    }
  }

  main {
    width: 100%;
    height: calc(100% - 80px);
    flex: 1;
    // background-color: peru;
    padding: 5px 10px;
    display: flex;

    .left {
      width: 25%;
      height: 100%;
      // background-color: rgb(17, 154, 95);
      display: flex;
      flex-direction: column;

      .left_top {
        width: 100%;
        height: 450px;
        padding: 10px;

        // 排名表
        .ranking {
          margin-left: 50px;
        }
      }

      .left_bottom {
        flex: 1;
        // background-color: rgb(214, 93, 53);
        padding: 10px;
      }

    }

    .middle {
      flex: 1;
      // background-color: palevioletred;
    }

    .right {
      width: 25%;
      height: 100%;
      // background-color: rgb(67, 46, 169);
      display: flex;
      flex-direction: column;

      .right_top {
        width: 100%;
        height: 350px;
        padding: 10px;
        // background-color: salmon;
      }

      .right_bottom {
        width: 100%;
        flex: 1;

        // background-color: rgb(214, 93, 53);
        // background-color: rgb(53, 214, 77);
        padding: 10px;
      }



    }
  }

}

.small_title {
  color: #ffffff;
  padding-top: 10px;
  display: block;
}
</style>